<template>
  <div class="app-container home">
    <query-panel
      label-width="100px"
      :form-data="queryParams"
      @handleQuery="handleQuery"
      :spacing="14"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="模板名称：" prop="templateName">
            <el-input
              v-model="queryParams.templateName"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板类型：" prop="moduleType">
            <el-select
              v-model="queryParams.moduleType"
              placeholder="请选择模板类型"
              style="width: 100%"
            >
              <el-option
                v-for="item in processData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/template/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plai
          size="mini"
          @click="onAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
      </template>
      <template #moduleType="{ row }">
        <span>{{ moduleType[row.moduleType] }}</span>
      </template>
    </table-panel>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      v-if="open"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="135px"
        size="mini"
      >
        <el-form-item v-show="title !== '新增模板'" label="编码：" required>
          {{ form.code }}
        </el-form-item>
        <el-form-item label="模板名称：" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="模板类型：" prop="moduleType">
          <el-select v-model="form.moduleType" placeholder="请选择模板类型">
            <el-option
              v-for="item in processData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示形式：" prop="templateFileId">
          <image-upload
            list-type="picture-card"
            :limit="1"
            @input="handleImg"
            :value="imgData"
          ></image-upload>
        </el-form-item>
        <el-form-item label="标题个数：" prop="titleNum">
          <el-input v-model="form.titleNum" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="内容个数：" prop="textNum">
          <el-input v-model="form.textNum" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="上传文件个数：" prop="fileNum">
          <el-input v-model="form.fileNum" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="链接个数：" prop="urlNum">
          <el-input v-model="form.urlNum" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="路由：" prop="router">
          <el-input v-model="form.router" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="路径：" prop="mappingUrl">
          <el-input v-model="form.mappingUrl" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitForm"
          >确定</el-button
        >
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="cancel"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listMenu } from "@/api/system/menu";
import { getUser } from "@/api/system/user";
import { detailsImg } from "@/api/file/index";
import {
  addTemplate,
  editTemplate,
  deleteTemplate,
} from "@/api/templateManage/index";
export default {
  name: "accessoriesAndServices",
  components: {
    TablePanel,
    QueryPanel,
    Treeselect,
  },
  data() {
    return {
      queryParams: {
        templateName: "",
        moduleType: undefined,
      },
      processData: [
        {
          value: "1",
          label: "企业展示",
        },
        {
          value: "2",
          label: "产品货架",
        },
      ],
      moduleType: {1: '企业展示', 2: '产品货架'},
      operateArray: [
        {
          name: "编辑",
          icon: "table-column-edit",
          hasPermi: "['system:post:edit']",
        },
        {
          name: "删除",
          icon: "table-column-delete",
          hasPermi: "['system:post:remove']",
        },
      ],
      columns: [
        {
          field: "templateName",
          label: "模板名称",
        },
        {
          field: "moduleType",
          label: "模板类型",
          slots: { default: 'moduleType' }
        },
        {
          field: "titleNum",
          label: "标题个数",
        },
        {
          field: "textNum",
          label: "内容个数",
        },
        {
          field: "fileNum",
          label: "上传文件个数",
        },
        {
          field: "urlNum",
          label: "链接个数",
        },
        {
          field: "createTime",
          label: "创建时间",
        },
        {
          label: "操作",
          width: "200px",
        },
      ],
      open: false,
      title: "新增模板",
      form: {
        moduleType: "",
        code: "",
        templateName: "",
        templateFileId: "",
        titleNum: "",
        textNum: "",
        fileNum: "",
        urlNum: "",
        router: '',
        mappingUrl: "",
      },
      roleOptions: [],
      menuOptions: [],
      postOptions: [],
      rules: {
        templateName: [
          { required: true, message: "模板名称不能为空", trigger: "blur" },
        ],
        moduleType: [
          { required: true, message: "模板类型不能为空", trigger: "blur" },
        ],
        templateFileId: [
          { required: true, message: "显示形式不能为空", trigger: "blur" },
        ],
        titleNum: [
          { required: true, message: "标题个数不能为空", trigger: "blur" },
        ],
        textNum: [
          { required: true, message: "内容个数不能为空", trigger: "blur" },
        ],
        fileNum: [
          { required: true, message: "文件个数不能为空", trigger: "blur" },
        ],
        urlNum: [
          { required: true, message: "链接个数不能为空", trigger: "blur" },
        ],
        mappingUrl: [
          { required: true, message: "路径不能为空", trigger: "blur" },
        ],
        router: [
          { required: true, message: "路由不能为空", trigger: "blur" },
        ],
      },
      imgData: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.getTreeselect();
      await getUser().then((response) => {
        this.roleOptions = response.roles;
      });
    },
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增
    onAdd() {
      this.imgData = [];
      this.form = {
        moduleType: "",
        code: "",
        templateName: "",
        templateFileId: "",
        titleNum: "",
        textNum: "",
        fileNum: "",
        urlNum: "",
        router: '',
        mappingUrl: "",
      };
      this.title = "新增模板";
      this.getTreeselect();
      this.open = true;
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    cancel() {
      this.open = false;
    },
    handleImg(str) {
      if(typeof res === "boolean") {
        this.form.templateFileId = '';
      } else {
        this.form.templateFileId = str.data.fileId;
      }
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.title === "新增模板") {
            addTemplate(this.form)
              .then((res) => {
                this.$message.success("操作成功！");
                this.$refs.tablePanel.getTable();
                this.open = false;
              })
              .catch((err) => {
                this.$message.error("操作失败！");
                this.open = false;
              });
          } else {
            editTemplate(this.form)
              .then((res) => {
                this.$message.success("操作成功！");
                this.$refs.tablePanel.getTable();
                this.open = false;
              })
              .catch((err) => {
                this.$message.error("操作失败！");
                this.open = false;
              });
          }
        }
      });
    },
    onOperate(type, row) {
      this.imgData = [];
      if (type === "编辑") {
        this.title = "编辑";
        for (let d in this.form) {
          this.form[d] = row[d];
        }
        this.form.templateId = row.templateId;
        detailsImg({fileId: row.templateFileId}).then(res => {
          this.imgData.push({ url: res.data.url, name: res.data.name });
        })
        this.getTreeselect();
        this.open = true;
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      } else if (type === "删除") {
        deleteTemplate(row.templateId)
          .then((res) => {
            this.$message.success("操作成功！");
            this.$refs.tablePanel.getTable();
            this.open = false;
          })
          .catch((err) => {
            this.$message.error("操作失败！");
            this.open = false;
          });
      }
    },
    getTreeselect() {
      listMenu().then((response) => {
        this.menuOptions = this.handleTree(response.data, "menuId");
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped lang="scss">
.input-style {
  width: 70%;
}
::v-deep .vue-treeselect__menu-container {
  left: 0;
}
::v-deep .el-dialog__body {
  .el-input {
    width: 90%;
  }
  .el-select {
    width: 90%;
    .el-input {
      width: 100%;
    }
  }
}
.cell span{
  font-size: 16px;
  font-weight: 400;
}
</style>
